<template>
    <div class="pinarea" @click.self="closeImg">
        <div class="pinPage">
            <pinchzoom :src="src"/>
            <Button class="buttonBack" type="success"  @click="closeImg" long>返回</Button>
        </div>
    </div>   
</template>

<script>
export default {
    name: 'pinPage',
    components: {
        pinchzoom: () => import('./pinchzoom.vue')
    },
    props: ['src'],
    methods: {
        closeImg() {
            this.$emit('closeImg')
        }
    }
}
</script>

<style>
  .pinarea{
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: #000;
  }
  .pinPage{
      width: 100%;
  }
  .buttonBack{
      position: absolute;
      height: 40px;
      border-radius: 0;
      bottom: 0;
      z-index: 2;
  }
</style>
